<style lang="less" scoped>
.wiki-carousel{
  // background-color: #fff;
  // padding-bottom: 10px;
  // margin-bottom: 20px;

  .title{
    margin-bottom: 40px;
  }

  .carousel{
    margin-bottom: 35px;
    position: relative;

    ul{
      margin: 0;
      padding: 0;
      list-style-type: none;

      display: flex;

      li{
        border: 1px solid #DDE0E0;
        background-color: #fff;
        box-shadow: 1px 1px 5px 2px #DDE0E0;

        img{
          width: 100%;
          height: 200px;
        }

        .content{
          border-top: 1px solid #DDE0E0;
          background-color: #fff;
          padding: 20px 10px;

          .link-title{
            &, &:hover, &:focus, &:active{
              color: #333333;
              text-decoration: none;
              h4{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }

          small{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: block-axis;
            height: 34px;
          }
        }
      }
    }
    .left-arrow, .right-arrow {
      position: absolute;
      top: 50%;
      cursor: pointer;
      color: #DDE0E0;
      font-size: 45px;

      &:hover, &:focus {
        color: #37CA73;
      }
    }
    .left-arrow{
      left: -15px;
    }
    .right-arrow{
      right: -15px;
    }
  }
}
</style>

<template>

<div id="wikiCarousel" class="wiki-carousel">
  <div class="row text-center title">
    <h2>门窗百科</h2>
    <h4 class="text-gray">阳毅高端定制门窗，向设计师致敬，有爱就有家！</h4>
  </div>

  <div class="row carousel">
    <div class="col-xs-12">
      <ul>
        <div v-for="(wiki, index) in wikis" :id="wiki.id" v-bind:class="['col-xs-3', showIds.indexOf(wiki.id) === -1 ? 'hidden' : 'show']" v-bind:style="{order: showIds.indexOf(wiki.id) != -1 ? showIds.indexOf(wiki.id) : -1 }" >
          <li>
            <a :href="'/wiki/' + wiki.id">
              <img :src="wiki.first_img" alt="">
            </a>
            <div class="content">
              <a :href="'/wiki/' + wiki.id" class="link-title">
                <h4>{{wiki.title}}</h4>
              </a>
              <small>{{wiki.summary}}</small>
            </div>
          </li>
        </div>
      </ul>
    </div>

    <i class="icon-arrow-left left-arrow" @click="changeLi('pre')" v-if="wikis.length >= 3"></i>
    <i class="icon-arrow-right right-arrow" @click="changeLi('next')" v-if="wikis.length >= 3"></i>
  </div>
</div>

</template>

<script>
import Query from '../query'
import SuccessDialog from 'success_alert'
import ErrorDialog from 'error_alert'

export default {
    name: "wikiCarousel",

    data: function data() {
        return {
          wikis: {},
          allIds: [],
          showIds: [],
        }
    },

    mounted: function mounted() {
      this.initData()
    },

    methods: {

      // 初始数据
      async initData() {
        var _this = this

        await Query.get('/wiki', {
          params: {
            per_page: 5
          }
        }).then((data) => {
          if (data.status === 'ok') {
            _this.wikis = data.wikis

            var allIds, showArr, showIds

            if (_this.wikis) {
              allIds = _this.wikis.map((item) => {
                return item.id
              })

              if (allIds) {
                _this.allIds = allIds
              }

              showArr = _this.wikis.filter((item, index) => {
                return index < 4
              })

              if (showArr) {
                showIds = showArr.map((item) => {
                  return item.id
                })
              }
            }

            if (showIds) {
              _this.showIds = showIds
            }
          } else {
            ErrorDialog.show('网络链接失败，请刷新页面！')
          }
        }).catch((error) => {
          console.log(error)
        })
      },

      // 往前，往后
      changeLi(way) {
        var _this = this
        var keyId

        if (way === 'pre') {
          keyId = _this.showIds[0]
          let currentIndex = _this.allIds.indexOf(keyId)
          let preIndex = currentIndex === 0 ? _this.allIds.length - 1 : currentIndex - 1

          _this.showIds.pop()
          _this.showIds.unshift(_this.allIds[preIndex])
        } else if (way === 'next') {
          keyId = _this.showIds[_this.showIds.length - 1]
          let currentIndex = _this.allIds.indexOf(keyId)
          let nextIndex = currentIndex === _this.allIds.length - 1 ? 0 : currentIndex + 1

          _this.showIds.shift()
          _this.showIds.push(_this.allIds[nextIndex])
        }
      },
    },
}

</script>
